<template>
  <div class="article-container">
    <p>count 的值是：{{ count }}</p>
    <p>count 乘以 2 的值是：{{ countPlus2 }}</p>
    <button @click="add">+1</button>
    <hr />

    <input type="color" v-model="fontColor" />
    <button @click="setFontColor">设置网页文字颜色</button>
  </div>
</template>

<script setup>
import { useFontColor, useCounter } from '../hooks'

// 1. 功能1：数值自增
const { count, countPlus2, add } = useCounter(9)
// 2. 功能2：点击按钮设置网页文字颜色
const [fontColor, setFontColor] = useFontColor()
</script>

<!-- <script>
export default {
  // 数据
  data() {
    // 响应式数据，直接声明到 return 的这个对象中
    return {
      count: 0,
      fontColor: '#ffffff'
    }
  },
  // 组件内的方法或事件处理函数
  methods: {
    add() {
      // 这里的 this 表示当前组件的实例对象
      this.count++
    },
    setFontColor() {
      window.document.body.style.color = this.fontColor
    }
  },
  computed: {
    countPlus2() {
      // 只要是计算属性，就必须 return 一个计算的结果
      return this.count * 2
    }
  }
}
</script> -->

<style scoped>
.article-container {
  background-color: #aaa;
  height: 185px;
  width: 100%;
}
</style>
